<template>
  <div>
    <div class="addBtn">
      <el-button
          size="small"
          :type="topAddBtn.type"
          plain
          @click="addRow()"
      >
        <i :class="topAddBtn.icon"></i>
        {{ topAddBtn.name }}
      </el-button>
    </div>
    <el-form
        ref="commonForm"
        :inline="true"
        :label-position="labelPosition"
        :model="dataLists[index]"
        size="mini"
        v-for="(ele, index) in rowList"
        :key="'row_'+index"
    >
          <el-form-item v-for="(item, eleIndex) in ele" :label="item.name" :key="'col_'+eleIndex" :prop="item.key" :label-width="item.labelWidth+'px'">
              <component :is="getComponent(item)" :readonly="item.readonly" v-bind="getComponentParams(item)" v-on="getSubComponentEvent(item)" v-model="dataLists[index][item.key]" :style="item.style">
              </component>
          </el-form-item>
      <el-form-item class="deleteBtn">
        <el-button
            size="small"
            type="danger"
            icon="el-icon-minus"
            @click="deleteRow(index)"
        >
        </el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import baseComp from "./baseComp";

export default {
  name: 'dynamicRow',
    extends: baseComp,
  model: {
    prop: "returnData",
    event: "returnDataChange",
  },
  props: {
      //界面顶部按钮配置项
    topAddBtn: {
      type: Object,
      default: () => {
      },
    },

    // 传进来的页面渲染数据，配置渲染定义
    dataList: {
      type: Array,
      required: true,
    },
      //v-model数据绑定项
    returnData:{
      default: () => [],
    },
  },
  watch: {
      returnData: {
          handler(val){
              if (val){
                  this.rowList = [];
                  this.dataLists = val;
                  for(let rowIndex in val){
                    this.addRowConfig()
                  }
              }
          },
          deep: true,
          immediate: true
      }
  },
  mounted() {
  },
  data() {
    return {
      // 结果数据
      dataLists: this.returnData || [],
      labelPosition: "right",
      rowList: [], //显示数据集
    };
  },
  methods: {

      /**
       * 获取组件绑定函数
       * @param item
       */
      getSubComponentEvent(item){
        let event = this.getComponentEvent(item);
        event['change'] = this.changeList;
        return event;
      },

      /**
       * change事件
       */
    changeList() {
      this.$emit("returnDataChange", this.dataLists)
    },
      /**
       * 添加一行数据
       */
    addRow(row) {
        if (row){
            this.dataLists.push(row)
        }else {
            this.dataLists.push({})
        }
        this.rowList.push(JSON.parse(JSON.stringify(this.dataList)));
        this.$emit("returnDataChange", this.dataLists)
    },
      /**
       * 新增渲染配置项
       */
      addRowConfig(){
          this.rowList.push(JSON.parse(JSON.stringify(this.dataList)));
      },
      /**
       * 删除一行数据
       * @param index
       */
    deleteRow(index) {
        this.rowList.splice(index, 1);
        this.dataLists.splice(index, 1);
        this.$emit("returnDataChange", this.dataLists)
    }
  },
};
</script>

<style lang="less" scoped>
.el-form {
  // margin-left: 30px;
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 16px;
  }

  .el-form--inline .el-form-item {
    margin-right: 16px;
  }
}

/deep/ .el-input__inner {
  // width: 170px;
  height: 32px;
  line-height: 32px;
}

/deep/ .el-textarea__inner {
  // width: 220px;
  height: 32px;
}

//三角箭头
/deep/ .el-icon-arrow-up:before {
  content: "";
  font-size: 15px;
  color: #666666;
}

/deep/ .el-icon-arrow-down:before {
  content: "\e790";
  font-size: 15px;
  color: #666666;
}

.addBtn /deep/ .el-button--small {
  height: 32px;
  margin: 0px 0 13px 0px;
}

.deleteBtn /deep/ .el-button--small {
  height: 32px;
}

/deep/ .el-form--inline .el-form-item__label {
  display: inline !important;
}

//编码方式-弹框
/deep/.el-dialog__header{
  background: none;
  color: #28394F;
}
/deep/.el-icon-close{
  cursor: pointer;
  font-size: 24px;
}
// /deep/.el-alert__title.is-bold{
//     color:#666;
// }
// /deep/.el-alert--warning.is-light .el-alert__description {
//     color: #666;
// }
/deep/.el-table th .cell {
  font-size: 14px;
  // font-weight: bold;
}
.el-icon-warning:before {
  font-size: 20px;
  // position: relative;
  // top: 15px;
  // left: 15px;
  color:#edad4a;
}
.boxTop{
  width: 331px;
  height: 80px;

  .top{
    width: 85px;
    justify-content: space-between;
    align-items: center;
  }

}
</style>
